<!doctype html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
        integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
    <link rel="stylesheet" href="/mobile/css/app.css">
    <title>My Orders</title>
</head>

<body class="mdui-theme-primary-red">
    <div class="mdui-container-fluid">
        <div class="mdui-toolbar mdui-color-deep-orange-700">
            <a href="javascript:window.history.go(-1);" class="mdui-btn mdui-btn-icon">
                <i class="mdui-icon material-icons">arrow_back</i>
            </a>
            <span class="mdui-typo-title">预约服务</span>
            <div class="mdui-toolbar-spacer"></div>
        </div>
        <div class="mdui-row mdui-m-l-1 mdui-m-r-1">
            <form method="POST" action="/m/my/post_reserve" id="reserveForm">
                @csrf
            <input type="hidden" name="coupon_code" value="{{$coupon_code}}">
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">姓名</label>
                    <input class="mdui-textfield-input" type="text" name="name" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">电话</label>
                    <input class="mdui-textfield-input" type="text" name="phone" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">服务时间</label>
                    <input class="mdui-textfield-input" type="text" name="serve_date" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">服务时段</label>
                    <input class="mdui-textfield-input" type="text" name="serve_time_rang" />
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">服务类型</label>
                    <select class="mdui-select" name="produce_id">
                        <option value="1">深度保洁2小时</option>
                        <option value="2">深度保洁4小时</option>
                        <option value="4">开荒保洁2居室</option>
                        <option value="5">开荒保洁3居室</option>
                        <option value="6">其他</option>
                    </select>
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">所在城市</label>
                    <select class="mdui-select" id="provinceSelct" name="province" onchange="selectCity();"></select>
                    <select class="mdui-select" id="citySelect" name="city"></select>
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">小区及门牌</label>
                    <input class="mdui-textfield-input" type="text" name="home" />
                </div><div class="mdui-textfield">
                    <label class="mdui-textfield-label">备注</label>
                    <textarea class="mdui-textfield-input" name="remark"></textarea>
                </div>
                <div class="mdui-textfield">
                    <button class="mdui-btn mdui-btn-block mdui-color-orange mdui-color-theme-accent mdui-ripple"
                        id="logoutBtn">提交预约</button>
                </div>
            </form>
        </div>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
        integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+" crossorigin="anonymous">
    </script>
    <script src="/mobile/js/app.js"></script>
    <script>
        var myProvince = "";
        var myCity = "";
        mdui.$(function() {
            mdui.$("#provinceSelct").html(getProvinceOptions(myProvince));
            selectCity()
        })

        function selectCity() {
            var province = mdui.$("#provinceSelct").val();
            var html = getCityOptions(province, myCity);
            mdui.$("#citySelect").html(html)
            mdui.mutation();
        }
    </script>
</body>

</html>
